<template>
  <div class="app-container">
    <div style="background-color: #fff">
      <div class="container-module" style="padding-bottom: 0">
        <el-form :inline="true" class="search-form" size="small">
          <el-row style="display: flex; flex-wrap: wrap">
            <div style="flex: 1">
              <el-form-item
                class="search-form-item"
                label="订单流水号"
                style="margin: 5px 0"
              >
                <el-input
                  v-model="searchForm.order_no"
                  clearable
                  placeholder="请输入订单流水号"
                  type="text"
                  min="1"
                  class="input-with-select"
                />
              </el-form-item>
              <el-form-item
                v-if="searchDisplay"
                class="search-form-item"
                label="发货单号"
                style="margin: 5px 0"
              >
                <el-input
                  v-model="searchForm.delivery_no"
                  clearable
                  placeholder="请输入发货单号"
                  type="text"
                  min="1"
                  class="input-with-select"
                />
              </el-form-item>

              <el-form-item
                v-if="searchDisplay"
                class="search-form-item"
                label="商品名称"
                style="margin: 5px 0"
              >
                <el-input
                  v-model="searchForm.search"
                  clearable
                  placeholder="请输入商品名称"
                  type="text"
                  min="1"
                  class="input-with-select"
                />
              </el-form-item>
              <el-form-item
                v-if="searchDisplay"
                class="search-form-item"
                label="商户名称"
                style="margin: 5px 0"
              >
                <el-input
                  v-model="searchForm.mer_name"
                  clearable
                  placeholder="请输入商户名称"
                  type="text"
                  min="1"
                  class="input-with-select"
                />
              </el-form-item>
              <el-form-item
                v-if="searchDisplay"
                class="search-form-item"
                label="商户手机号"
                style="margin: 5px 0"
              >
                <el-input
                  v-model="searchForm.mer_cellphone"
                  clearable
                  placeholder="请输入商户手机号"
                  type="text"
                  min="1"
                  class="input-with-select"
                />
              </el-form-item>

              <el-form-item
                v-if="searchDisplay"
                class="search-form-item"
                label="商品ID"
                style="margin: 5px 0"
              >
                <el-input
                  v-model="searchForm.goods_id"
                  clearable
                  placeholder="请输入商品ID"
                  type="text"
                  min="1"
                  class="input-with-select"
                />
              </el-form-item>
              <el-form-item
                v-if="searchDisplay"
                class="search-form-item"
                label="收货人姓名"
                style="margin: 5px 0"
              >
                <el-input
                  v-model="searchForm.consignee_name"
                  clearable
                  placeholder="请输入收货人姓名"
                  type="text"
                  min="1"
                  class="input-with-select"
                />
              </el-form-item>
              <el-form-item
                class="search-form-item"
                label="收货人电话"
                style="margin: 5px 0"
              >
                <el-input
                  v-model="searchForm.consignee_cellphone"
                  clearable
                  placeholder="请输入收货人手机号"
                  type="text"
                  min="1"
                  class="input-with-select"
                />
              </el-form-item>
            </div>
            <div style="padding: 5px 0">
              <el-form-item>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="getQuery"
                >查询</el-button>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-refresh"
                  @click="resetting"
                >重置</el-button>
                <el-button
                  v-if="!searchDisplay"
                  icon="el-icon-caret-bottom"
                  @click="searchDisplay = true"
                >展开</el-button>
                <el-button
                  v-else
                  icon="el-icon-caret-top"
                  @click="searchDisplay = false"
                >收起</el-button>
              </el-form-item>
            </div>
          </el-row>
        </el-form>
      </div>
      <el-divider />
      <div style="padding: 0 20px 20px">
        <div class="marginBottom">
          <el-row :gutter="20">
            <el-col :span="20">
              <el-button
                icon="el-icon-tickets"
                type="primary"
                :loading="exportLoading"
                @click="exportSupplierListWay"
              >订单导出</el-button>
              <el-button icon="el-icon-truck" type="primary" @click="doOpen">订单发货</el-button>
            </el-col>
            <el-col :span="4" style="float: right">
              <div class="right-panel el-button-group">
                <el-button
                  class=""
                  icon="el-icon-refresh"
                  size="mini"
                  @click="getListWay"
                />
                <el-dropdown trigger="click" :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <el-button
                      class=""
                      icon="el-icon-s-operation"
                      size="mini"
                    />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="fruit in allTableThead"
                      :key="fruit"
                    >
                      <el-checkbox
                        v-model="checkboxTableThead"
                        :label="fruit"
                      >{{ tableTheadOptions[fruit].label }}</el-checkbox>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="20">
          <el-col class="new_table_card">
            <el-table
              ref="tablerefs"
              v-loading="loading"
              highlight-current-row
              :data="OrderList"
              :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }"
              style="width: 100%"
              height="100%"
            >
              <el-table-column
                v-for="fruit in tableThead"
                :key="fruit"
                :label="tableTheadOptions[fruit].label"
                :width="
                  tableTheadOptions[fruit].width
                    ? tableTheadOptions[fruit].width + 'px'
                    : 'auto'
                "
                align="center"
              >
                <template slot-scope="scope">
                  <span>
                    {{ scope.row[fruit] }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                width="160px"
                prop="address"
                label="商品名称"
              >
                <template slot-scope="scope">
                  <el-tooltip
                    placement="top-start"
                    :content="scope.row.goods.goods_name + ''"
                  >
                    <div class="one_line_hidden">
                      {{
                        scope.row.goods.goods_name
                          ? scope.row.goods.goods_name
                          : "-"
                      }}
                    </div>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="address" label="购买数量">
                <template slot-scope="scope">
                  {{ scope.row.goods.number }}
                </template>
              </el-table-column>
              <el-table-column align="center" prop="address" label="收货人">
                <template slot-scope="scope">
                  {{ scope.row.consignee_info.real_name }}
                </template>
              </el-table-column>
              <el-table-column align="center" prop="address" label="收货人电话">
                <template slot-scope="scope">
                  <el-tooltip
                    placement="top-start"
                    :content="scope.row.consignee_info.real_cellphone + ''"
                  >
                    <div class="one_line_hidden">
                      {{
                        scope.row.consignee_info.real_cellphone
                          ? scope.row.consignee_info.real_cellphone
                          : "-"
                      }}
                    </div>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                width="200px"
                prop="address"
                label="收货地址"
              >
                <template slot-scope="scope">
                  <el-tooltip
                    placement="top-start"
                    :content="scope.row.consignee_info.address + ''"
                  >
                    <div class="one_line_hidden">
                      {{
                        scope.row.consignee_info.address
                          ? scope.row.consignee_info.address
                          : "-"
                      }}
                    </div>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="address" label="状态">
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.status == 2"
                    style="color: #0076f6;"
                  >待发货</span>
                  <span
                    v-if="scope.row.status == 3"
                    style="color: #0076f6;"
                  >待收货</span>
                  <span
                    v-if="scope.row.status == 5"
                    style="color: #ccc;"
                  >已取消</span>
                  <span
                    v-if="scope.row.status == 4"
                    style="color: #13ce66;"
                  >已完成</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                fixed="right"
                width="150"
                prop="address"
                label="操作"
              >
                <template slot-scope="scope">
                  <el-button
                    v-if="scope.row.status == 2"
                    type="text"
                    size="mini"
                    @click="editNotesWay(scope.row)"
                  >
                    去发货
                  </el-button>
                  <el-divider
                    v-if="scope.row.status == 2"
                    direction="vertical"
                  />
                  <el-button
                    type="text"
                    size="mini"
                    @click="detailsDialogway(scope.row)"
                  >
                    详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table></el-col>
        </el-row>
        <el-row style="text-align: right">
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="searchForm.page"
            :limit.sync="searchForm.count"
            @pagination="getListWay"
          />
        </el-row>
      </div>
    </div>
    <!-- 去发货弹框 -->
    <el-drawer
      :show-close="true"
      :modal-append-to-body="false"
      :with-header="false"
      :append-to-body="true"
      title="发货"
      :visible.sync="dialogSendOutGoods"
      size="50%"
      @close="SendOutGoodsClose"
    >
    <div class="drawerTitle" style="margin-bottom: 20px;">
      <span>发货</span>
      <div class="close" @click="SendOutGoodsClose">
        <i class="el-icon-close" style="font-size: 24px;" />
      </div>
    </div>
     <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 140px)">
       <div class="elivery-list">
         <div class="list-item">
           <div class="left">
             <div class="left-icon">
               <i class="el-icon-shopping-bag-1" />
             </div>
             <div class="list-center">
               <span v-if="shippingDetails.status ? shippingDetails.status == 2 : false" style="color: #bd312b;font-weight: bold">待发货</span>
               <p>订单编号: <span style="font-weight: bold">{{ shippingDetails.order_no ? shippingDetails.order_no : "-" }}</span> </p>
             </div>
           </div>
         </div>
       </div>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
      <el-form-item label="发货类型" prop="">
        <el-input v-model="tobeshipped" disabled class="input-widht" />
      </el-form-item>
        <el-form-item label="快递名称" prop="express_name">
          <el-input
            v-model="form.express_name"
            class="input-widht"
            maxlength="20"
            show-word-limit
            clearable
            placeholder="请输入快递名称"
          />
        </el-form-item>
        <el-form-item label="快递单号" prop="express_num">
          <el-input
            v-model="form.express_num"
            class="input-widht"
            clearable
            maxlength="20"
            show-word-limit
            placeholder="请输入快递单号"
          />
        </el-form-item>
      </el-form>
      </el-scrollbar>
      <el-col :span="24" style="text-align: right; padding-right: 30px;">
      <el-button @click="dialogSendOutGoods = false">取 消</el-button>
      <el-button
        type="primary"
        :loading="dialogSendOutGoodsSubmit"
        @click="submitWay"
      >确 定</el-button>
      </el-col>
    </el-drawer>

    <!-- 查看快递信息 -->
    <el-dialog
      :close-on-click-modal="false"
      title="快递信息"
      :visible.sync="dialogdelivery"
      width="700px"
      custom-class="custorm"
    >
      <el-descriptions
        v-for="(item, index) in delivery_list"
        :key="index"
        :style="index !== 0 ? 'margin-top:20px' : ''"
        class="margin-top"
        :title="item.express_name"
        :column="3"
        border
      >
        <el-descriptions-item label="快递">
          {{ item.express_name }}
        </el-descriptions-item>
        <el-descriptions-item label="订单号">
          {{ item.express_num }}
        </el-descriptions-item>
        <el-descriptions-item label="发货时间">
          {{ item.created_at }}
        </el-descriptions-item>
        <el-descriptions-item label="收货人">
          {{ item.recipient }}
        </el-descriptions-item>
        <el-descriptions-item label="收货人电话">
          {{ item.phone_number }}
        </el-descriptions-item>
        <el-descriptions-item label="省市区">
          {{ item.province_name }}
          {{ item.city_name }}
          {{ item.district_name }}
        </el-descriptions-item>
        <el-descriptions-item label="详细地址">
          {{ item.address_details }}
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogdelivery = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogdelivery = false"
        >确 定</el-button>
      </span>
    </el-dialog>

    <el-drawer
      :modal-append-to-body="false"
      :append-to-body="true"
      title="订单信息"
      size="70%"
      :with-header="false"
      :visible.sync="detaildialog"
      :show-close="true"
      @close="addressClose"
    >
      <div v-loading="detailLoading" style="position: relative">
        <div class="drawerTitle">
          <span>订单信息</span>
          <div class="close" @click="addressClose">
            <i class="el-icon-close" style="font-size: 24px;" />
          </div>
        </div>
        <div class="drawerContent" style="padding: 10px 30px;">
          <div class="informationTitleView">
            <div class="leftBox">
              <div class="leftborder" />
              <div class="text">订单信息</div>
            </div>
            <div class="right">
              <el-button
                v-if="detailsObj.status == 2"
                style="margin: 5px; color: #fff"
                type="warning"
                size="mini"
                @click="editNotesWay(detailsObj)"
              >
                <div style="color: #fff">去发货</div>
              </el-button>
            </div>
          </div>
          <div style="padding: 0 10px">
            <el-descriptions :column="2">
              <el-descriptions-item
                label-class-name="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="订单编号"
              >
                {{
                  detailsObj.order_no ? detailsObj.order_no : "-"
                }}</el-descriptions-item>
              <el-descriptions-item
                label-class-name="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="订单状态"
              >
                <div
                  v-if="detailsObj.status ? detailsObj.status == 4 : false"
                  type="success"
                >已完成</div>
                <div
                  v-if="detailsObj.status ? detailsObj.status == 3 : false"
                  type="info"
                >待收货</div>
                <div
                  v-if="detailsObj.status ? detailsObj.status == 2 : false"
                  type="warning"
                >待发货</div></el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="informationTitleView">
            <div class="leftBox">
              <div class="leftborder" />
              <div class="text">商品信息</div>
            </div>
            <div class="right" />
          </div>
          <div style="padding: 0 10px">
            <el-descriptions :column="2">
              <el-descriptions-item
                label-class-name="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="商品名称"
              >
                {{ detailsObj.goods ? detailsObj.goods.goods_name : "-" }}
              </el-descriptions-item>
              <el-descriptions-item
                label-class-name="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="商品ID"
              >
                {{ detailsObj.goods ? detailsObj.goods.goods_id : "-" }}
              </el-descriptions-item>
              <el-descriptions-item
                label-class-name="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="购买数量"
              >
                {{ detailsObj.goods ? detailsObj.goods.number : "-" }}
              </el-descriptions-item>
              <el-descriptions-item
                label-class-name="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="规格名称"
              >
                {{ detailsObj.goods ? detailsObj.goods.sku_name : "-" }}
              </el-descriptions-item>
              <el-descriptions-item
                label-class-name="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="商品图片"
              >
                <div style="width: 40px; height: 40px">
                  <el-image
                    :src="detailsObj.goods ? detailsObj.goods.goods_image : ''"
                    :preview-src-list="[
                      detailsObj.goods ? detailsObj.goods.goods_image : '',
                    ]"
                  />
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="informationTitleView">
            <div class="leftBox">
              <div class="leftborder" />
              <div class="text">供应商信息</div>
            </div>
            <div class="right" />
          </div>
          <div style="padding: 0 10px">
            <el-descriptions :column="2">
              <el-descriptions-item
                label-class-name="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="供应商名称"
              >
                {{ detailsObj.merchant ? detailsObj.merchant.name : "-" }}
              </el-descriptions-item>
              <el-descriptions-item
                label-class-name="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="供应商ID"
              >
                {{ detailsObj.merchant ? detailsObj.merchant.id : "-" }}
              </el-descriptions-item>
              <el-descriptions-item
                label-class-name="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="负责人"
              >
                {{ detailsObj.merchant ? detailsObj.merchant.user_name : "-" }}
              </el-descriptions-item>
              <el-descriptions-item
                label-class-name="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="负责人电话"
              >
                {{
                  detailsObj.merchant ? detailsObj.merchant.user_cellphone : "-"
                }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="informationTitleView">
            <div class="leftBox">
              <div class="leftborder" />
              <div class="text">收货信息</div>
            </div>
            <div class="right" />
          </div>
          <div style="padding: 0 10px">
            <el-descriptions :column="2">
              <el-descriptions-item
                label-class-name="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="收货人"
              >
                {{
                  detailsObj.consignee_info
                    ? detailsObj.consignee_info.real_name
                    : "-"
                }}
              </el-descriptions-item>
              <el-descriptions-item
                label-class-name="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="收货人电话"
              >
                {{
                  detailsObj.consignee_info
                    ? detailsObj.consignee_info.real_cellphone
                    : "-"
                }}
              </el-descriptions-item>
              <el-descriptions-item
                label-class-name="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="收货地址"
              >
                {{
                  detailsObj.consignee_info
                    ? detailsObj.consignee_info.address
                    : "-"
                }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
    </el-drawer>
    <batch-order ref="refOrder" @getListWay="getQuery" />
  </div>
</template>

<script>
import { getSupplyOrderList, editDelivery } from '@/api/order/index'
import {
  getOrderSelfList,
  getOrderSelfDetail,
  orderSelfdelivery,
  orderGetListExport
} from '@/api/merchant/index'
import batchOrder from './components/batchOrder.vue'

const tableTheadOption = {
  order_no: {
    label: '订单号',
    field: 'order_no',
    width: 200
  }
  // "consignee_info.real_name": {
  //   label: "收货人姓名",
  //   field: "consignee_info.real_name",
  // },
  // "consignee_info.real_cellphone": {
  //   label: "收货人电话",
  //   field: "consignee_info.real_cellphone",
  // },
  // "consignee_info.address": {
  //   label: "收货人地址",
  //   field: "consignee_info.address",
  // },
  // "goods.goods_id": {
  //   label: "商品ID",
  //   field: "goods.goods_id",
  // },
  // "goods.goods_name": {
  //   label: "商品名称",
  //   field: "goods.goods_name",
  // },
  // "goods.goods_image": {
  //   label: "商品主图",
  //   field: "goods.goods_image",
  // },
  // "goods.sku_name": {
  //   label: "规格名称",
  //   field: "goods.sku_name",
  // },
  // status: {
  //   label: "状态",
  //   field: "status",
  // },
  // "merchant.id": {
  //   label: "商户ID",
  //   field: "id",
  // },
  // "merchant.name": {
  //   label: "店铺名称",
  //   field: "name",
  // },
  // " merchant.user_name": {
  //   label: "负责人姓名",
  //   field: "user_name",
  // },
  // "merchant.user_cellphone": {
  //   label: "负责人手机号",
  //   field: "user_cellphone",
  // },
}
const allTableThead = [
  'order_no'
  // "goods.goods_id",
  // "goods.goods_name",
  // "goods.goods_image",
  // "goodssku_name",
  // "consignee_inf.oreal_name",
  // "consignee_inf.oreal_cellphone",
  // "consignee_inf.oaddress",
  // "merchant.id",
  // "merchant.name",
  // "merchant.user_name",
  // "merchant.user_cellphone",
  // "status",
]
const defaultTableThead = [
  'order_no'
  // "goods.goods_name",
  // "goods.goods_image",
  // "consignee_inf.oreal_name",
  // "consignee_inf.oreal_cellphone",
  // "consignee_inf.oaddress",
  // "merchant.name",
  // "merchant.user_name",
  // "status",
]
export default {
  components: {
    batchOrder
  },
  data() {
    return {
      tobeshipped:'待发货',
      // 默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      loading: false,
      searchDisplay: false,
      exportLoading: false,
      shippingDetails:{},//发货信息
      searchForm: {
        goods_id: '', // 商品ID
        search: '', // 商品名称
        order_no: '', // 订单编号
        mer_name: '', // 商户名称
        mer_cellphone: '', // 商户手机号
        delivery_no: '', // 发货单号
        consignee_name: '', // 收货人姓名
        consignee_cellphone: '', // 收货人手机号
        status: '2', // 状态(1.待支付,2.已完成)
        count: 20,
        page: 1
      },
      create_time: [],
      pay_time: [],
      OrderList: [],
      total: 0,
      dialogSendOutGoods: false,
      dialogSendOutGoodsSubmit: false,
      form: {
        detail_id: '',
        express_name: '',
        express_num: ''
      },
      rules: {
        express_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g
              if (value == '') {
                return callback(new Error('请输入快递名称'))
              } else {
                if (req.test(value)) {
                  return callback(
                    new Error('快递单号格式不正确,不能包含特殊字符')
                  )
                }
                callback()
              }
            },
            trigger: 'change'
          }
        ],
        express_num: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z]/g
              if (value == '') {
                return callback(new Error('请输入快递单号'))
              } else {
                if (req.test(value)) {
                  return callback(
                    new Error('快递单号格式不正确,只能包含数字和英文')
                  )
                }
                callback()
              }
            },
            trigger: 'change'
          }
        ]
      },
      dialogdelivery: false,
      delivery_list: [],
      detailsObj: {},
      detaildialog: false,
      detailLoading: false
    }
  },
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      )
      this.tableKey = this.tableKey + 1
      this.$nextTick(() => {
        this.$refs.tablerefs.doLayout()
      })
    }
  },
  created() {
    this.getListWay()
  },
  methods: {
    addressClose() {
      this.detaildialog = false
    },
    getQuery() {
      this.searchForm.page = 1
      this.getListWay()
    },
    getListWay() {
      this.loading = true
      getOrderSelfList(this.searchForm)
        .then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.loading = false
            return this.$messages.error(res.msg)
          }
          this.loading = false
          this.OrderList = res.data.list
          this.total = res.data.total
        })
        .catch((err) => {
          this.loading = false
          this.$messages.error(err.msg)
        })
    },
    resetting() {
      this.searchForm = {
        goods_id: '', // 商品ID
        search: '', // 商品名称
        order_no: '', // 订单编号
        mer_name: '', // 商户名称
        mer_cellphone: '', // 商户手机号
        delivery_no: '', // 发货单号
        consignee_name: '', // 收货人姓名
        consignee_cellphone: '', // 收货人手机号
        status: '2', // 状态(1.待支付,2.已完成)
        count: 20,
        page: 1
      }
      this.getListWay()
    },
    // 打开修改备注的弹框
    editNotesWay(row) {
      this.shippingDetails = row
      console.log(row)
      this.dialogSendOutGoods = true
      this.$nextTick(() => {
        this.SendOutGoodsClose()
        this.form.order_id = row.order_id
      })
    },
    SendOutGoodsClose() {
      this.form = {
        order_id: '',
        express_name: '',
        express_num: ''
      }
      this.$refs.form.resetFields()
    },
    submitWay() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.dialogSendOutGoodsSubmit = true
          orderSelfdelivery(this.form)
            .then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                this.loading = false
                this.dialogSendOutGoods = false
                this.dialogSendOutGoodsSubmit = false
                return this.$messages.error(res.msg)
              }
              this.SendOutGoodsClose()
              this.dialogSendOutGoods = false
              this.dialogSendOutGoodsSubmit = false
              this.detaildialog = false
              this.$messages.success(res.msg)
              this.detailsDialogway(this.form)
              this.getListWay()
            })
            .catch((err) => {
              this.dialogSendOutGoodsSubmit = false
              this.$messages.error(err.msg)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    drawerHandle(row) {
      this.delivery_list = row.delivery_list
      this.dialogdelivery = true
    },
    pathWay() {
      this.$router.push('/merchant/procure/afterpickup')
    },
    create_timeWay(vla) {
      this.searchForm.create_time_start = vla[0]
      this.searchForm.create_time_end = vla[1]
    },
    pay_timeWay(vla) {
      this.searchForm.pay_time_start = vla[0]
      this.searchForm.pay_time_end = vla[1]
    },
    detailsDialogway(row) {
      this.detaildialog = true
      this.detailLoading = true
      getOrderSelfDetail({ id: row.order_id }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.detailLoading = false
          this.detaildialog = false
          return this.$messages.error(res.msg)
        }
        this.detailLoading = false
        this.detailsObj = res.data
      })
      //
      // console.log(this.detailsObj);
      // this.detailLoading = false;
    },
    //   订单导出
    exportSupplierListWay() {
      if (this.OrderList.length > 100) {
        return this.$messages.error('最大不可超过100条')
      }
      this.exportLoading = true
      orderGetListExport(this.searchForm).then(res => {
        if (res.code === 200) {
          window.location.href = res.data.url
          this.$messages.success('导出成功')
        }else{
          this.$messages.info(res.msg)
        }
        this.exportLoading = false
      }).catch((err) => {
        this.exportLoading = false
      })
    },
    //   订单发货
    doOpen() {
      this.$refs.refOrder.open()
    }
  }
}
</script>

<style lang="scss">
.el-divider--horizontal {
  margin: 10px 0 !important;
}
.search-form-item {
  padding-bottom: 10px;
  padding-right: 20px;
  .el-form-item__label {
    font-size: 12px;
    font-weight: 500;
    // width:96px;
  }
  .el-input {
    width: 180px;
  }
}
</style>
  <style lang="scss" scoped>
// .app-container {
//   background-color: #fff !important;
// }
.marginBottom-10 {
  margin-bottom: 10px;
}
.marginRight-10 {
  margin-right: 10px;
}
.flex {
  display: flex;
}
.flex-between {
  display: flex;
  justify-content: space-between;
}
.button-box {
  font-size: 14px;
  text-align: right;
  font-size: 12px;
  .inquire-box {
    background: #1890ff;
    color: #ffffff;
  }
  .reset-box {
    background: #eeeeee;
  }
}
.app-container {
  background: #f3f5f7;
  .container-module {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    .title-module {
      font-size: 18px;
    }
    .search-module {
      padding-top: 20px;
      display: block;
    }
    .table-module {
      .table-top {
        margin-bottom: 20px;
      }
      .table-num {
        margin-left: 5px;
        background: #f0f0f0;
        width: 35px;
        border-radius: 5px;
      }
    }
  }
}
.input-widht{
    width: 300px;
  }
  .elivery-list{
    width: 96%;
    padding: 20px 20px 20px 30px;
    .list-item{
      height: 55px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      .left{
        display: flex;
        align-items: center;
        .left-icon{
          position: relative;
          width: 50px;
          height: 55px;
          margin-right: 10px;
          background-color: #1890ff;
          border-radius: 10px;
          .el-icon-shopping-bag-1{
            position: absolute;
            top: 50%;
            left: 50%;
            color: #FFFFFF;
            font-size:30px;
            transform: translate(-50%,-50%);
          }
        }
        .list-center{
          font-size: 14px;
          color: #303030;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 50px;
        }
      }
    }
  }
</style>
